<template>
  <view>
	<!-- <button @click="getSwiperData">点击发送请求</button> -->
	<!-- 搜索框 -->
	<UgoSearch></UgoSearch>
	<!-- 轮播图 -->
	 <!-- 
      1 img-mode="scaleToFill"  回顾原生小程序 image mode属性  设置图片内容和图片标签大小一样
      2 height 设置轮播图组件的高度   340 根据设计稿得出 
     -->
	<u-swiper img-mode="scaleToFill" height="340" :list="swiperdata" name="image_src"></u-swiper>
	<!-- 导航模块 -->
	<view class="catitems u-flex">
		<navigator class="u-flex-1 u-p-20" v-for="item in catitems" :key="item.name">
			<u-image mode="widthFix" :src="item.image_src"></u-image>
		</navigator>
	</view>
	<!-- 楼层 模块 -->
	<!-- 要进行两次循环 -->
	<view class="floordata">
		<!-- 第一个模块 -->
		<view class="floor-group" v-for="item1 in floordata" :key="item1.floor_title.name">
			<!-- 标题 -->
			<view class="floor-title">
				<u-image :src="item1.floor_title.image_src" mode="widthFix"></u-image>
			</view>
			<!-- 内容 -->
			<view class="floor-content">
				<navigator v-for="item2 in item1.product_list" :key="item2.name">
					<u-image mode="scaleToFill" height="100%" :src="item2.image_src"></u-image>
				</navigator>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import UgoSearch from '../../components/UgoSearch/UgoSearch.vue'
export default {
  components: { UgoSearch },
  data(){
	return {
		// 接收轮播图数据
		swiperdata:[],
		// 导航模块的数据
		catitems: [],
		// 楼层数据
		floordata: []
	}
  },
// 页面初始化
onLoad(){
	// 调用获取轮播图数据
	this.getSwiperData(),
	this.getCatitems(),
	this.getFloordata()
},
methods:{
	//获取轮播图数据
  async getSwiperData(){
	// 以下发送请求的方式 是使用 uniapp
	// const [err,result] = await uni.request({
	// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
	// })
	// // console.log(result);
	// this.swiperdata = result.data.message

	// 以下发送请求的方式 是使用 uview 返回值不是数组
	const result = await this.$u.get('/home/swiperdata')
	// console.log(result); //返回值不是数组
	this.swiperdata = result.message
  },
	// 获取导航模块的数据
	async getCatitems(){
		const result = await this.$u.get('/home/catitems')
		// console.log(result); //
		this.catitems = result.message
	},
	// 获取楼层的数据
	async getFloordata(){
		const result = await this.$u.get('/home/floordata')
		// console.log(result); //
		this.floordata = result.message
	}
 }

}

</script>

<style lang="scss">
.floor-title{
	margin-top: 15rpx;
}
.floor-content{
	// 清除浮动
	overflow: hidden;
	// 每个内容图片的公共样式
	navigator {
		// 浮动
		float: left;
		margin-left: 16rpx;
	};
	// 第一个导航标签（大图片）
	navigator:first-child{
		width: 232rpx;
		height: 386rpx;
	};
	// 后四个导航标签（小图片）
  // 前几个 :nth-child(-n+ 几)
  // 后几个 :nth-last-child(-n+ 几)
	navigator:nth-last-child(-n + 4){
		width: 232rpx;
		height: 188rpx;
	};
	// 后两个导航标签（小图片）
	navigator:nth-last-child(-n + 2){
		margin-top: 14rpx;
	};
}
</style>